<template>
  <view>
    <uni-nav-bar :fixed="true" background-color="#fff" color='#000' status-bar left-icon="left" title="我赞过的"
      :border="false" @clickLeft='back' />

    <view class="interact-container">
      <block v-for="(item,index) in interactInfo" :key="index">
        <interact-box :item='item' pid=1 @getInfo='getInfo()' @changeCollect="changeCollect($event)"
          @changeDianzan="changeDianzan($event)"></interact-box>
      </block>
      <uni-popup ref="alertDialog" type="dialog">
        <uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" content="您确定要删除这条动态吗？"
          @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
      </uni-popup>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        page: 1,
        pagesize: 4,
        interactInfo: [],
        delId: 0,
      };
    },
    onLoad() {
      this.getInfo()
    },
    onShow() {
      this.getInfo()
    },
    methods: {
      back() {
        uni.navigateBack()
      },
      async getInfo() {
        const that = this
        const obj = {
          page: that.page,
          pagesize: that.pagesize
        }
        const data = await uni.$http.post(`/users/post/page/myThumbs/${this.userInfo.studentId}`, obj)
        console.log(data.data.data.records);
        this.interactInfo = data.data.data.records
      },
      changeCollect(e) {
        const that = this
        this.interactInfo.forEach((item, index) => {
          if (item.postId == e.id) {
            that.interactInfo[index].collectionCount += e.count
            that.interactInfo[index].is_PostCollection += e.count
          }
        })
      },
      changeDianzan(e) {
        const that = this
        this.interactInfo.forEach((item, index) => {
          if (item.postId == e.id) {
            that.interactInfo[index].thumbsCount += e.count
            that.interactInfo[index].is_PostThumbs += e.count
          }
        })
      },
      preview(i) {
        uni.previewImage({
          current: i,
          urls: ['/static/sky.jpg', '/static/sky.jpg', '/static/sky.jpg', '/static/sky.jpg', '/static/sky.jpg',
            '/static/sky.jpg', '/static/sky.jpg', '/static/sky.jpg', '/static/sky.jpg'
          ]
        })
      },
      dialogToggle(id) {
        this.$refs.alertDialog.open()
        this.delId = id
      },
      dialogClose() {
        this.$refs.alertDialog.close()
      },
      async dialogConfirm() {
        await uni.$http.delete('/users/post/deleteMyPosts', this.delId)
        this.getInfo()
      },
      goInteractDetail(id) {
        uni.navigateTo({
          url: '/subpkg/interactDetail/interactDetail?postId=' + id
        })
      },
    },
    computed: {
      ...mapState('my_user', ['userInfo'])
    },
    onReachBottom() {
      this.pagesize += 2
      this.getInfo()
    }
  }
</script>

<style lang="scss">
  .interact-container {

    .interact-box {
      display: flex;
      flex-direction: column;
      margin-bottom: 20rpx;
      padding: 10rpx 30rpx;
      background-color: #fff;

      .interact-header {
        display: flex;
        position: relative;

        .image {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .user-info {
          display: flex;
          flex-direction: column;
          justify-content: top;
          margin-left: 30rpx;

          .name {
            margin-top: 14rpx;
            font-size: 32rpx;
          }

          .school {
            margin-top: 6rpx;
            font-size: 24rpx;
            color: #777;
          }
        }

        .del {
          position: absolute;
          top: 20rpx;
          right: 10rpx;
        }
      }

      .interact-main {
        margin-top: 30rpx;

        .text-title {
          padding: 15rpx 0;
          font-size: 40rpx;
          text-align: center;
        }

        .textInfo {}

        .image-box {
          display: flex;
          flex-wrap: wrap;
          margin-top: 20rpx;

          image {
            width: 220rpx;
            height: 220rpx;
            margin-top: 10rpx;
            margin-left: 10rpx;
          }
        }
      }

      .interact-footer {
        display: flex;
        height: 90rpx;
        margin-top: 20rpx;
        border-top: 1rpx solid #eee;

        .interact-fn {
          display: flex;
          width: 300rpx;
          margin-left: 370rpx;

          .collect,
          .comment,
          .good {
            display: flex;
            align-items: center;
            width: 150rpx;
            height: 100rpx;
            margin-right: 30rpx;

            .image {
              width: 60rpx;
              height: 60rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .value {
              margin-left: 10rpx;
              font-size: 30rpx;
            }
          }
        }
      }
    }
  }
</style>